import Person from "@/components/Person";
import RichText from "@/components/RichText";
import Search from "@/components/Search";
import Sheet from "@/components/Sheet";
import { Breadcrumb, Card, Modal, Space } from "antd";
import dayjs from "dayjs";
import { useState } from "react";

const dataSource = {
    total: 20,
    data: Array.from({
        length: 46,
    }).map((_, i) => ({
        key: i,
        content: '用户登录系统',
        type: `登录${i}`,
        creator: '章三',
        time: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
    }))
};
export default function Biaoqianguanli() {
    const [page, setPage] = useState({ pageNum: 1, pageSize: 10 })
    const [open, setOpen] = useState(false)
    const handleSearch = (val) => {
        console.log(val)
    }
    const columns = [
        {
            title: '标签名称',
            dataIndex: 'content',
        },
        {
            title: '标签编号',
            dataIndex: 'type'
        },
        {
            title: '适用场景',
            dataIndex: 'type'
        },
        {
            title: '操作人',
            dataIndex: 'creator',
        },
        {
            title: '操作时间',
            dataIndex: 'time'
        },
        {
            title: '设定条件',
            dataIndex: 'creator',
            align: "center",
            render: (text) => <a onClick={() => setOpen(true)}>设置</a>,
        }
    ]
    // 分页
    const handlePage = (pageNum, pageSize) => {
        setPage({
            pageNum,
            pageSize
        })
    }
    return (
        <div>
            <h2 className="headline">标签管理</h2>
            <Space direction="vertical" size={16} style={{ width: "100%" }}>
                <Search onSearch={handleSearch}></Search>
                <Card>
                    <Sheet columns={columns} dataSource={dataSource} page={page} rowKey="key" onChange={handlePage}></Sheet>
                </Card>
            </Space>
            <Modal title="条件设定" centered
                open={open}
                onCancel={() => setOpen(false)}
                width={1000}
                footer={null}>
                <RichText />
            </Modal>
        </div>
    )
}